<template>
  <div class="info">
    <!-- 个人信息,导航 -->
    <van-nav-bar
      class="nav-main"
      title="个人信息"
      left-arrow
      :fixed="true"
      @click-left="$router.go(-1)"
      right-text="保存"
      @click-right="save"
    />
    <!-- 单元格 头像 昵称 介绍  -->
    <van-cell-group>
      <van-cell title="头像" is-link>
        <template #default>
          <img :src="user.intro" alt="" class="mainImg" @click="getUpload" />
        </template>
      </van-cell>
      <van-cell title="昵称" :value="user.name" is-link @click="nameDji" />
      <van-cell title="介绍" :value="user.intro" is-link @click="inrtoDji" />
    </van-cell-group>
    <!-- 性别 生日 -->
    <van-cell-group class="danyuan">
      <van-cell
        title="性别"
        :value="user.gender === 0 ? '男' : '女'"
        is-link
        @click="genderDji"
      />
      <van-cell title="生日" :value="user.birthday" is-link @click="shengri" />
    </van-cell-group>
    <!-- 修改昵称面板 -->
    <van-popup v-model="nameShow" position="bottom" :style="{ height: '5%' }">
      <van-field v-model="user.name" required />
    </van-popup>

    <!-- 修改介绍面板 -->
    <van-popup v-model="introShow" position="bottom" :style="{ height: '5%' }">
      <van-field v-model="user.intro" required />
    </van-popup>

    <!-- 性别面板 -->

    <van-popup v-model="xingbShow" position="bottom" :style="{ height: '50%' }">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
        v-model="user.gender"
      />
    </van-popup>
    <!-- {{user.photo}} -->
    <!-- 时间 生日-->
    <van-popup
      v-model="shijianShow"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-datetime-picker
        :fixed="true"
        v-model="currentDate"
        type="date"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="ooConfirm"
        @cancel="ooCancel"
      />
    </van-popup>

    <!-- 相册组件 -->
    <upload ref="upload" @passimg="passimg" />
  </div>
</template>

<script>
/*
先去配置info路由导入,,path:'/info',再去my页面给图片添加点击事件,$router.push('/info')
van-nav-bar复制过来,样式微调,下面的都是用单元格,去官网查找 VUE_APP_URL=http://47.106.228.28:1337
*/
import { apiUse, apiProfile, apiBji } from '@/api/info.js'
import upload from './coms/upload'
export default {
  components: {
    upload,
  },
  data () {
    return {
      nameShow: false, // 昵称的修改
      introShow: false, // 介绍
      user: {}, // 用户的个人信息  对象的点语法赋值
      xingbShow: false, // 性别
      columns: ['女', '男'], // 性别的数据
      shijianShow: false, //时间,以及时间的参数
      minDate: new Date(1991, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date()
    }
  },
  methods: {
    // 成功上传图片
    passimg (img) {
      this.user.photo = img
    },
    // 相册的弹框,封装就要利用父传子获得upload的属性
    getUpload () {
      this.$refs.upload.show = true
    },
    //   生日时间的确定  找到官网样式修改好,但会出现bug,点击确定会出现undefined,要转换时间,利用new Date(),年月日,最后关闭弹窗
    ooConfirm (value) {
      var a = value.getFullYear()
      var b = value.getMonth() + 1
      var c = value.getDate()
      var value = `${a}-${b}-${c}`
      this.user.birthday = value
      this.shijianShow = false
    },
    //   生日时间的取消
    ooCancel () {
      this.shijianShow = false
    },
    //   生日时间的弹框
    shengri () {
      this.shijianShow = true
    },
    //   性别 确定 有bug,性别修改不了,是后台的问题,上面是 :value="user.gender === 0 ? '男' : '女'"  这边的判断如下
    onConfirm (value) {
      this.user.gender = value === '女' ? 1 : 0
      this.xingbShow = false
      //   this.save()
    },
    // 性别取消
    onCancel () {
      this.xingbShow = false
    },
    // 性别的弹出框
    genderDji () {
      this.xingbShow = true
    },

    // 介绍的弹出框
    inrtoDji () {
      this.introShow = true
    },
    async save () {
      // 将修改后的数据提交到服务器,给保存添加点击事件.@click-right 封装api 向服务器发送请求,最后提示用户this.$toast.success
      await apiBji(this.user)
      this.$toast.success('用户信息更新成功')
    },
    // 打开修改昵称面板  找到popup弹框,设置nameShow=false 在昵称设置点击事件,this.nameShow=true
    nameDji () {
      this.nameShow = true
    },
    // 自己的信息 他分为两个api,可能是为了炫技,(自己的信息和用户的个人资料),先去封装两个api,再导入,发送请求到服务器,把接收的信息保存,可以设置一个user,this,user.name...,这样的是对象的解构赋值,然后渲染页面,出现bug,因为不是data里面定义的,没有响应式,所以要加this.$set,就有响应式的属性了
    async getUse () {
      const res = await apiUse()
      //   console.log(res)
      this.$set(this.user, 'name', res.data.data.name)
      this.$set(this.user, 'photo', res.data.data.photo)
      this.$set(this.user, 'intro', res.data.data.intro)
    },
    // 得到用户个人资料
    async genderProfile () {
      const res = await apiProfile()
      this.$set(this.user, 'gender', res.data.data.gender)
      this.$set(this.user, 'birthday', res.data.data.birthday)
    }
  },
  created () {
    // 渲染用户数据
    this.getUse(), this.genderProfile()
  }
}
</script>

<style lang="less" scoped>
.info {
  margin-top: 46px;
  font-size: 20px;
  background-color: #f5f7f9;

  .nav-main {
    background-color: #3e9df8;
    /deep/ .van-nav-bar__title {
      color: #fff;
    }
  }
  /deep/ i.van-icon.van-icon-arrow-left.van-nav-bar__arrow,
  /deep/ .van-nav-bar__text {
    color: #fff;
  }
  .mainImg {
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }
  .danyuan {
    margin-top: 15px;
  }
  /deep/ .van-picker__cancel,
  /deep/ .van-picker__confirm {
    color: skyblue;
  }
}
</style>
